/**
 * 指数分组组件（按地区）
 */

import React, { useState } from 'react';
import { GlobalIndexData } from '@shared/types/market';
import IndexItem from './IndexItem';

interface IndexGroupProps {
  title: string;
  icon: string;
  indexes: GlobalIndexData[];
  defaultExpanded?: boolean;
}

const IndexGroup: React.FC<IndexGroupProps> = ({
  title,
  icon,
  indexes,
  defaultExpanded = true,
}) => {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);

  return (
    <div
      style={{
        marginBottom: '16px',
        backgroundColor: 'white',
        borderRadius: '8px',
        overflow: 'hidden',
        border: '1px solid #f0f0f0',
      }}
    >
      {/* 分组标题 */}
      <div
        onClick={() => setIsExpanded(!isExpanded)}
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          padding: '12px 16px',
          backgroundColor: '#fafafa',
          cursor: 'pointer',
          userSelect: 'none',
          transition: 'background-color 0.2s',
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = '#f5f5f5';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = '#fafafa';
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span style={{ fontSize: '18px' }}>{icon}</span>
          <span style={{ fontSize: '15px', fontWeight: '600', color: '#333' }}>
            {title}
          </span>
          <span
            style={{
              fontSize: '12px',
              color: '#999',
              backgroundColor: '#f0f0f0',
              padding: '2px 8px',
              borderRadius: '10px',
            }}
          >
            {indexes.length}
          </span>
        </div>
        <div
          style={{
            fontSize: '18px',
            color: '#999',
            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
            transition: 'transform 0.3s',
          }}
        >
          ▼
        </div>
      </div>

      {/* 指数列表 */}
      {isExpanded && (
        <div>
          {indexes.length > 0 ? (
            indexes.map((index) => (
              <IndexItem key={index.code} data={index} />
            ))
          ) : (
            <div
              style={{
                padding: '20px',
                textAlign: 'center',
                color: '#999',
                fontSize: '14px',
              }}
            >
              暂无数据
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default IndexGroup;

